<template>
	<view>
		<view class="swiper-box">
			<swiper circular="true" autoplay="true" @change="swiperChange">
				<swiper-item v-for="(swiper, i) in detailData.big_pics" :key="i">
					<image :src="swiper" @click="proviewimg(swiper)"></image>
				</swiper-item>
			</swiper>
			<view class="indicator" v-if="detailData.big_pics">{{ currentSwiper + 1 }}/{{ detailData.big_pics.length }}
			</view>
		</view>
		<!-- 标题 价格 -->
		<view class="info-box">
			<view class="info-title">{{ detailData.title }}</view>
			<!-- <view class="info-miaoshu">{{detailData.subtitle}}</view> -->
			<view class="info-price">
				<text>￥{{ detailData.price }}</text>
			</view>
			<view class="info-stock">
				<text class="price">大王币：{{ detailData.integral }}</text>
				<text class="stock">销量:{{ detailData.sales }}</text>
			</view>
		</view>

		<!-- 详情 -->
		<view class="description">
			<view class="title">
				<image :src="iconurl + '/static/mall/cat1.png'"></image>
				<text>商品详情</text>
				<image :src="iconurl + '/static/mall/cat2.png'"></image>
			</view>
			<u-parse :html="detailData.detail" style="font-size:0"></u-parse>
		</view>
		<!-- 底部菜单 -->
		<view class="footer">
			<!-- <view class="shoucang flexs" @click="goshoucang">
				<image src="https://pd.pdaxiang.com/upload/static/mall/collection.png" v-if="detailData.is_collection==0"></image>
				<image src="https://pd.pdaxiang.com/upload/static/mall/collections.png" v-if="detailData.is_collection==1"></image>
				<text v-if="detailData.is_collection==0">收藏</text>
				<text v-if="detailData.is_collection==1" style="color: #d81e06;">已收藏</text>
			</view> -->
			<view class="joinCart">
				<view class="flexs" @tap="joinCart(2)">立即购买</view>
			</view>
		</view>
		<view class="popup spec" @touchmove.stop.prevent="discard" @tap="hideSpec">
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<!-- 规格-模态层弹窗 -->
			<echone-sku :show="popupShow" mode="forbidden" :goodsData="detailData" :theme-color="themeColor"
				:combinations="combinations" :specifications="detailData.attr_group_list"
				:default-select-index="selectedIndex" :combinations-props="combinationsProps"
				:specifications-props="specificationsProps" :walletData="walletData" :mjstatus="statusmall" ref="ggProp"
				@close="handleClose" @confirm="handleConfirm"></echone-sku>
		</view>
	</view>
</template>

<script>
	import echoneSku from '@/components/echone-sku/echone-sku';
	export default {
		components: {
			echoneSku
		},
		data() {
			return {
				iconurl: this.$configs.urls,
				popupShow: false,
				//轮播图下标
				currentSwiper: 0,
				// 商品信息
				detailList: {
					big_pics: [],
					goods_id: 1,
					goods_num: 1,
					name: '',
					detail: ''
				},
				themeColor: '#F34A4A',
				goods_id: '',
				urls: '',
				Uparse: '',
				
				statusmall: 0, //0是购买 1 是加入购物车
				selectedIndex: 0,
				combinationsProps: {
					id: 'skuId',
					value: 'skuValue',
					image: 'skuImage',
					price: 'skuPrice',
					stock: 'skuStock',
					integral: "skuIntegral",
					combination: "combination"
				},
				specificationsProps: {
					id: 'id',
					list: 'attr_list',
					name: 'attr_group_name'
				},
				combinations: [{
					skuValue: '',
					skuImage: '',
					skuPrice: 0,
					skuStock: 0
				}],
				detailData: {},
				walletData: {}, //余额
				loginsta:''
			};
		},
		onLoad(option) {
			this.goods_id = option.goods_id;
			this.loginStatuss()
		},
		onReady() {},
		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom() {},
		onShow() {
			// this.getwallet() //钱包
			this.getlist();
		},
		mounted() {},
		methods: {
			loginStatuss() {
				this.$Request.get(this.$api.index.loginStatus).then(res => {
					this.loginsta = res.data.status
				})
			},
			getwallet() {
				this.$Request.get(this.$api.user.wallet).then(res => {
					this.walletData = res.data
				});
			},
			getlist() {

				let data = {
					goods_id: this.goods_id
				}
				this.$Request.get(this.$api.mall.detail, data).then(res => {
					this.detailData = res.data.goods
					this.$set(this.combinations[0], 'skuValue', res.data.goods.name);
					this.$set(this.combinations[0], 'skuPrice', res.data.goods.attr[0].price);
					this.$set(this.combinations[0], 'skuIntegral', res.data.goods.attr[0].integral);
					this.$set(this.combinations[0], 'skuImage', res.data.goods.attr[0].pic);
					this.$set(this.combinations[0], 'combination', res.data.goods.attr[0].combination);

				});
			},
			//控制弹窗是否可关
			handleClose() {
				this.popupShow = false
				this.specClass = 'none';
			},
			//关闭规格弹窗
			hideSpec() {
				return
			},
			//立即购买
			joinCart(type) {
				if (this.loginsta == '0') {
					uni.navigateTo({
						url: `/pages/user/login/public`
					})
					return
				}
				this.popupShow = true;
				if (type == 2) {
					this.$refs.ggProp.status = 0
					this.statusmall = 0;
				} else {
					this.$refs.ggProp.status = 1
					this.statusmall = 1;
				}


			},
			handleConfirm(obj) {
				// ////console.log(obj.result)
				////console.log(obj)
				if (obj.is == 1) {
					//现金支付
					uni.navigateTo({
						url: '/mallPage/mall/determine?goods_id=' + this.goods_id + '&goodsData=' + JSON.stringify(
							obj)
					});
				} else if (obj.is == 2) {
					//大王币
					uni.navigateTo({
						url: '/mallPage/mall/yuanqishipay?goods_id=' + this.goods_id + '&goodsData=' + JSON
							.stringify(obj)
					});
				}

			},
			proviewimg(img) {
				let arr = []
				arr.push(img)
				uni.previewImage({
					urls: arr,
					current: 1,
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
							uni.saveImageToPhotosAlbum({
								filePath: arr,
								success: function() {
									uni.showToast({
										title: "保存成功",
										duration: 1500
									})
								}
							});
						}
					}
				});
			},
			//轮播图指示器
			swiperChange(event) {
				this.currentSwiper = event.detail.current;
			},
			goshoucang() {
				let data = {
					goods_id: this.goods_id
				}
				this.$Request.post(this.$api.mall.addcollection, data).then(res => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					if (this.detailData.is_collection == 0) {
						this.detailData.is_collection = 1
					} else {
						this.detailData.is_collection = 0
					}
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.share-content {
		background: #FFFFFF;
		padding-top: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		view {
			width: 292rpx;
			border: 1rpx solid #CCCCCC;
			font-size: 26rpx;
		}
	}

	.share-wrap {
		background: #FFFFFF;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		>view {
			margin: 20rpx;
			width: 200rpx;

			image {
				display: block;
				width: 100rpx;
				margin: 0 auto;
				height: 100rpx;
			}

			view {
				display: block;
				text-align: center;
				font-size: 26rpx;
				margin-top: 10rpx;
			}
		}
	}

	.info-miaoshu {
		font-size: 26upx;
		color: #666666;
		font-weight: 400;
		padding-top: 10rpx;
	}

	.info-stock {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 20rpx;

		.price {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			// text-decoration:line-through;
			margin-left: 10rpx;
		}

		.stock {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}

	.info-price {
		padding-top: 10rpx;

		text:nth-child(1) {
			font-size: 36upx;
			color: #FF0000;
			font-weight: 400;
		}

		text:nth-child(2) {
			font-size: 26upx;
			color: #999;
			font-weight: 400;
			text-decoration: line-through;
			margin-left: 10rpx;
		}
	}

	.info-title {
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
	}

	.info-box {
		padding: 20rpx 0 20rpx 20rpx;
		background-color: #fff;
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: 0upx;
		height: 100rpx;
		// border-top: solid 1upx #eee;
		// background-color: #fff;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.shoucang {
			width: 280rpx;
			height: 100rpx;
			font-size: 18rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			flex-direction: column;

			image {
				width: 34rpx;
				height: 32rpx;
			}
		}

		.joinCart {
			color: #fff;
			font-size: 28upx;
			width: 100%;

			view {
				width: 95vw;
				height: 100rpx;
				background: #5ABAFF;
				border-radius: 48px;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: white;
				text-align: center;
				margin: 0 2.5vw;
				position: fixed;
				bottom: 5vw;
			}
		}
	}

	page {
		background-color: #f8f8f8;
	}


	.icon {
		font-size: 26upx;
	}

	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */
		background-color: #f1f1f1;
		transition: opacity 0.05s linear;
	}

	.swiper-box {
		position: relative;
		width: 100%;
		height: 100vw;

		swiper {
			width: 100%;
			height: 100vw;

			swiper-item {
				image {
					width: 100%;
					height: 100vw;
				}
			}
		}

		.indicator {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 25upx;
			height: 40upx;
			border-radius: 40upx;
			font-size: 22upx;
			position: absolute;
			bottom: 20upx;
			right: 20upx;
			color: #fff;
			background-color: rgba(0, 0, 0, 0.2);
		}
	}


	.description {
		margin-top: 20rpx;
		padding-bottom: 99upx;
		background: #FFFFFF;

		.title {
			width: 100%;
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
				margin: 0 15rpx;
			}

			image {
				width: 34rpx;
				height: 32rpx;
			}
		}
	}
</style>